<#include "common/layout/__mainlayout.html">
<#assign navLink='manage:res:list' />
<@mainlayout>
<div class="row-content am-cf">
	<div class="row">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
			<div class="widget am-cf">
				<div class="widget-head am-cf">
					<div class="widget-title am-fl"></div>
						<div class="row">
                    <div class="col-md-12">
                        <!-- BEGIN SAMPLE TABLE PORTLET-->
                        <div class="portlet box green">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-comments"></i>资源管理
                                </div>
                                <div class="tools">
                                    <a href="javascript:;" class="collapse"> </a>
                                    <a href="#portlet-config" data-toggle="modal" class="config"> </a>
                                    <a href="javascript:;" class="reload"> </a>
                                    <a href="javascript:;" class="remove"> </a>
                                </div>
                            </div>
                            <div class="portlet-body">
                            
	                            <div id="toolbar" class="btn-group">
	                             <@hasperm key="manage:res:save">
	                                <button id="btn_add" type="button" class="btn btn-success">
	                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
	                                </button>
	                                <button id="btn_edit" type="button" class="btn btn-info">
	                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
	                                </button>
	                                </@hasperm>
	                                <@hasperm key="manage:res:delete">
	                                <button id="btn_delete" type="button" class="btn btn-danger">
	                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
	                                </button>
	                                </@hasperm>
	                            </div>
                            
                                <div class="table-scrollable">
                                    <table class="table-striped table-hover" id="table"
                                           data-toggle="table"
                                           data-pagination="true"
                                           data-search="true"
                                           data-advanced-search="true"
                                           data-id-table="advancedTable" data-toolbar="#toolbar"
                                           data-url="${realpath}/manage/getRess">
                                        <thead>
                                            <tr>
                                                <th data-checkbox="true"></th>
                                                <th data-field="id" data-sortable="true">ID</th>
                                                <th data-field="pid" data-sortable="true">父节点ID</th>
                                                <th data-field="name" data-sortable="true">名字</th>
                                                <th data-field="url" data-sortable="true">url</th>
                                                <th data-field="des" data-sortable="true" >描述</th>
                                                <th data-field="seq" data-sortable="true" >排序</th>
                                                <th data-field="type" data-sortable="true" data-formatter="typeFormatter">类型</th>
                                                <th data-field="enabled" data-sortable="true" data-formatter="enabledFormatter">是否启用</th>
                                                <th data-field="key" data-sortable="true" >key</th>
                                                <th data-field="modifydate" data-sortable="true" >修改时间</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!-- END SAMPLE TABLE PORTLET-->
                    </div>
					</div>
				<div class="widget-body  widget-body-lg am-fr">
				</div>
			</div>
		</div>
	</div>
</div>

 <!-- responsive -->
<div id="model" class="modal fade" tabindex="-1" data-width="760">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    </div>
    <div class="modal-body">
              <form class="form-horizontal" role="form">
              <input type="hidden" name="id" id="id" > 
                  <div class="form-body">
                       <div class="form-group">
                          <label class="col-md-3 control-label">名称</label>
                          <div class="col-md-9">
                              <input type="text" class="form-control" name="name" id="name" value=""> </div>
                      </div>
                      <div class="form-group">
                          <label class="col-md-3 control-label">url</label>
                          <div class="col-md-9">
                              <input type="text" class="form-control" name="url" id="url" value=""> </div>
                      </div>
                       <div class="form-group">
                          <label class="col-md-3 control-label">key</label>
                          <div class="col-md-9">
                              <input type="text" class="form-control" name="key" id="key" value=""> </div>
                      </div>
                       <div class="form-group">
                          <label class="col-md-3 control-label">排序</label>
                          <div class="col-md-9">
                              <input type="text" class="form-control" name="seq" id="seq" > </div>
                      </div>
                      <div class="form-group">
                          <label class="col-md-3 control-label">父菜单</label>
                          <div class="col-md-9">
                              <select class="form-control" name="pid" id="pid">       
                   	</select>
                           </div>
                      </div>
                       <div class="form-group">
                          <label class="col-md-3 control-label">是否启用</label>
                          <div class="col-md-9">
                              <select class="form-control" name="enabled" id="enabled">
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                   			</select>
                           </div>
                      </div>
                      <div class="form-group">
                          <label class="col-md-3 control-label">类型</label>
                          <div class="col-md-9">
                              <select class="form-control" name="type" id="type">
                                            <option value="1">菜单</option>
                                            <option value="2">权限</option>
                   			</select>
                           </div>
                      </div>
                     <div class="form-group">
                          <label class="col-md-3 control-label">描述</label>
                          <div class="col-md-9">
                              <input type="text" class="form-control" name="des" id="des"> </div>
                      </div>
                  </div>
              </form>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-danger">关闭</button>
        <button type="button" class="btn green" id="btn_save">保存</button>
    </div>
</div>


</@mainlayout>
<script>
function typeFormatter(value, row) {
    
    if (row.type == "1") {
        return ' <span class="label label-sm label-success"> 菜单</span>';
    }
    else {
        return ' <span class="label label-sm label-warning"> 按钮</span>';
    }
  
}

function enabledFormatter(value, row) {
    
    if (row.enabled == "1") {
        return ' <span class="label label-sm label-success"> 启用</span>';
    }
    else {
        return ' <span class="label label-sm label-danger"> 禁用</span>';
    }
  
}
//
 function loadMenu(){
 	var pid =  $("#pid");
 	pid.html("");
 	var root = $("<option value='0' >根目录</option>");
 	root.appendTo(pid);
 	$.ajax({
 		url: '${realpath}/manage/res/allmenu',
 		type: 'post',
 		dataType: 'json',
 		success:function(res){
 		   for(var i =0, _length=res.length; i < _length; i++){
 		   	var option = $("<option value='" + res[i].id + "' >&nbsp;&nbsp;&nbsp;" + res[i].name + "</option>");
 		   	option.appendTo(pid);
 		   }
 		}
 	});
 	
}


$(document).ready(function() {
	loadMenu();
});
//

   

   function getIds(){
 	  var ids = "";
 	 var selects = $('#table').bootstrapTable('getSelections');
 		for(var i = 0, _length=selects.length; i < _length ; i++){
 			if(i == _length-1){
                   ids = ids +"ids=" + selects[i].id;
               }
               else{
             	  ids = ids + "ids=" + selects[i].id + "&";
               }
 		}
 	return ids;
    }
   
   //
   function del(arr){
           layer.confirm('删除会把关联的子目录删除，是否删除？', {
       btn: ['是', '否'], //按钮
       shade: false //不显示遮罩
   }, function() {
   var d = dialog({
       content: "<div><img src='${realpath}/resources/images/loading.gif' />&nbsp;&nbsp;&nbsp;删除中...</div>",
   });
   d.showModal();
   setTimeout(function() {
       d.close().remove();
   }, 1000);
       $.ajax({
           url: '${realpath}/manage/res/delete',
           type: 'POST',
           dataType: 'json',
           data: arr,
           success: function(res) {
               if (res.errorMsg != null) {
                   layer.msg(res.errorMsg, {
                       icon: 5,
                       time: 1500 //2秒关闭（如果不配置，默认是3秒）
                   });
               } else {
                   layer.msg('删除成功', {
                       icon: 1,
                       time: 1000 //2秒关闭（如果不配置，默认是3秒）
                   }, function() {
                       $('#table').bootstrapTable('refresh');
                   });
               }
           }
       });


   }, function() {

   });

   }
   
   //
   $("#btn_delete").click(function(){
   	var arr = getIds();
   	if(arr.length == 0){
   		layer.msg("请选择要标记的行", {
				icon: 5,
				time: 1500 //2秒关闭（如果不配置，默认是3秒）
			});
			return;
   	}
       del(arr);
   });
   
   function  celarInput(){
   	$("input").val("");
   	$("#type").val(1);
   }
   $("#btn_add").click(function(){
	    celarInput();
	   $('#model').modal('show');		 
   });

   $("#btn_edit").click(function(event) {
   	celarInput();
    	var selects = $('#table').bootstrapTable('getSelections');
        	if(selects.length != 1){
        		layer.msg("请选择<b style='color:red;font-size:15px;'>1</b>行进行修改", {
    				icon: 5,
    				time: 1500 //2秒关闭（如果不配置，默认是3秒）
    			});
    		return;
        	}
        	update(selects[0]);	
   });
   function update(select){
   	$("#name").val(select.name);
   	$("#url").val(select.url);
   	$("#id").val(select.id);
   	$("#key").val(select.key);
   	$("#seq").val(select.seq);
   	$("#pid").val(select.pid);
   	$("#enabled").val(select.enabled);
   	$("#type").val(select.type);
   	$("#des").val(select.des);
   	$('#model').modal('show');	
   }
   //

   $("#btn_save").click(function(event) {
   	 $.ajax({
	 	url: '${realpath}/manage/res/save',
	 	type: 'post',
	 	dataType: 'json',
	 	data: $("form").serialize(),
	 	success:function(res){
		   if (res.errorMsg != null) {
		                    layer.msg(res.errorMsg, {
		                        icon: 5,
		                        time: 1500 //2秒关闭（如果不配置，默认是3秒）
		                    });
		                } else {
		                    layer.msg('保存成功', {
		                        icon: 1,
		                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
		                    }, function() {
		                        $('#table').bootstrapTable('refresh');
		                        $('#model').modal('hide');	
		                        loadMenu();
		                    });
		                }	
	 	}
	 });
   });
</script>

